<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div id="app">
        <child></child>
        <child></child>
    </div>

    <script>
        /*
            函数是有自身的局部作用域的，每一次复用组件的时候，data函数返回的都是新开辟的一块内存中的新对象，但是如果你像下面一样，提前定义好了一个对象，然后再在data里return出去，就失去了意义，因为无论data函数被调用多少次，它返回的都是你提前定义好的这一个对象，到时就会出现数据污染的问题。

            开发时难免会出现一个组件多次使用的情况，如果data设计为一个对象而不是函数，那么所有的组件使用的是同一个data，这就直接乱套了。
        */

        // 口说无凭，我们举个例子，你会发现，只有第一种是实现了多次调用数据互不干扰
        // 如果data设计为函数并且每次return的都是新对象
        let data = function () {
            return {
                test: ''
            }
        };

        let data1 = data();
        let data2 = data();
        console.log(data1 == data2);

        // 如果data被设计成一个对象而不是函数
        let dataz = {
            test: ''
        }
        let data3 = dataz;
        let data4 = dataz;
        console.log(data3 == data4);

        // 如果data被设计为函数，但是每次return的是同一个对象
        let objj = {
            test:''
        }
        let datax = function(){
            return objj;
        }
        let data5 = datax();
        let data6 = datax();
        console.log(data5 == data6);

        console.log('----------------------------------------------');

        let obj = {
            message: ''
        }
        let app = new Vue({
            el: '#app',
            components: {
                child: {
                    template:
                        `
                    <div>
                        <input type="text" v-model="message"/>
                        <p>{{ message }}</p>
                    </div>
                    `,
                    data() {
                        // 你会发现，当你在data中return出去的是你提前定义好的对象的时候，案例出现了问题，就是你使用了两次child组件，你在其中一个组件的输入框里输入的时候，影响到了另一个组件里的数据。其实你仔细一想就可以明白为什么
                        return obj;
                    }
                }
            }
        })
    </script>
</body>

</html>